<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor); height: 400px;">
    <!-- playground-fold-end -->

    <ui5-shellbar id="shellbar" secondary-title="home" show-product-switch>
        <ui5-shellbar-branding slot="branding">
            Corporate Portal
            <img src="../assets/images/sap-logo-svg.svg" alt="SAP Logo" slot="logo" />
        </ui5-shellbar-branding>
		<ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
    </ui5-shellbar>
    <ui5-popover id="productswitch-popover" placement="Bottom">
        <ui5-product-switch>
            <ui5-product-switch-item title-text="Home" subtitle-text="Central Home"
                icon="home"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud"
                icon="business-objects-experience"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba"
                icon="contacts"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Strategic Procurement" icon="cart-3"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Travel &amp; Expense" subtitle-text="Concur"
                icon="flight"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Vendor Management" subtitle-text="Fieldglass"
                icon="shipping-status"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Human Capital Management" icon="customer"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Sales Cloud" subtitle-text="Sales Cloud"
                icon="sales-notification"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Commerce Cloud" subtitle-text="Commerce Cloud"
                icon="retail-store"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Marketing Cloud" subtitle-text="Marketing Cloud"
                icon="marketing-campaign"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Service Cloud" icon="family-care"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="Customer Data Cloud"
                icon="customer-briefing"></ui5-product-switch-item>
            <ui5-product-switch-item title-text="S/4HANA" icon="batch-payments"></ui5-product-switch-item>
        </ui5-product-switch>

    </ui5-popover>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
